new Vue({
    el: '#app',
    data: function() {
        return {
            name: '', //查询关键字
            pageCurrent: 1, //当前页码
            pageSize: 8, //每页条数
            total: 0, //查询分页系总条数
            list: [{
                songLyric: '',
            }], //歌曲列表数据
            value: '0', //状态开关歌曲
            addFormVisible: false, //添加歌曲表单信息开关
            // 添加歌曲表单信息
            addFrom: '',
            // 表单验证规则
            rules: {
                songName: [{
                    required: true,
                    message: '歌曲名不能为空',
                    trigger: 'blur',
                }],
                singerName: [{
                    required: true,
                    message: '歌手名不能为空',
                    trigger: 'blur',
                }]
            },
            updateFormVisible: false, //修改歌曲表单信息开关
            // 修改歌曲表单信息
            updateFrom: '',
            isAllSelect: false, //是否全选
            ids: [], //id 数组
            headers: {
                "token": localStorage.getItem('token')
            },
            singerVisible: false, //分配角色信息弹框按钮
            defaultProps: {
                children: 'children',
                label: 'label',
                // parentId: 'parentId'
            },
            // 上传歌曲图片 文件列表
            fileImgList: [{
                name: '',
                url: ''
            }],
            showImgFileList: false,
            // 上传文件时要携带的参数
            uploadData: {
                songId: '' // 歌曲id
            },
            // 上传歌词 文件列表
            fileLrcList: [{
                name: '',
                url: ''
            }],
            showLrcFileList: false,
            // 上传歌曲 文件列表
            fileMp3List: [{
                name: '',
                url: ''
            }],
            showMp3FileList: false,
            addSongId: '', //要添加歌手的歌曲 id
            // 要添加的歌手表单 
            addSingerList: {
                singerName: ''
            },
            // 添加歌手表单 歌手信息
            singerList: [{
                singerRemarks: '',
            }],
            singerId: -1, // 要添加歌手的 id 单选框绑定值
            albumList: '',
            albumId: -1, // 要添加专辑的 id 单选框绑定值
        }
    },
    mounted() { // 生命周期函数
        this.getPageInfo()
    },
    methods: {
        //获取分页列表数据
        getPageInfo() {
            // 清空数据
            this.list = ''
            console.log(this.name)
            if (this.name.trim() != '') { //判断是否添加了搜素关键字
                //获取token
                let jwtToken = localStorage.getItem('token')
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/song/page' + '/' + this.pageCurrent + '/' + this
                        .pageSize + '/' + this.name,
                    headers: {
                        'token': jwtToken
                    }
                }).then(res => {
                    console.log(res.data)
                    if (res.data.code == 200) { //成功
                        let songPageInfo = res.data.data.songPage
                        //1、将后端返回的列表数据赋值给 list
                        // 歌词不必全部显示
                        for (var i = 0; i < songPageInfo.records.length; i++) {
                            // 如果歌词不为 null
                            if (songPageInfo.records[i].songLyric != null && songPageInfo.records[i]
                                .songLyric != '') {
                                // 对歌词截取，歌词文字太多了，这显示前50个字符 + ...
                                songPageInfo.records[i].songLyric = songPageInfo.records[i].songLyric
                                    .slice(0, 50) + ' ...'
                            }
                        }
                        this.list = songPageInfo.records

                        //2、将后端分页信息也赋值给前端相应字段
                        this.pageCurrent = songPageInfo.current
                        this.pageSize = songPageInfo.size
                        this.total = songPageInfo.total
                    } else {
                        this.$message.error("系统错误请联系管理员！")
                    }
                })
            } else { //没有带关键字查询列表信息
                //获取token
                let jwtToken = localStorage.getItem('token')
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/song/page' + '/' + this.pageCurrent + '/' + this
                        .pageSize,
                    headers: {
                        'token': jwtToken
                    }
                }).then(res => {
                    console.log(res.data)
                    if (res.data.code == 200) { //成功
                        let songPageInfo = res.data.data.songPage
                        //1、将后端返回的列表数据赋值给 list
                        // 歌词不必全部显示
                        for (var i = 0; i < songPageInfo.records.length; i++) {
                            // 如果歌词不为 null
                            if (songPageInfo.records[i].songLyric != null && songPageInfo.records[i]
                                .songLyric != '') {
                                // 对歌词截取
                                songPageInfo.records[i].songLyric = songPageInfo.records[i].songLyric
                                    .slice(0, 50) + ' ...'
                            }
                        }
                        this.list = songPageInfo.records
                        // 歌词文字太多了，这显示前十个字符 + ...

                        //2、将后端分页信息也赋值给前端相应字段
                        this.pageCurrent = songPageInfo.current
                        this.pageSize = songPageInfo.size
                        this.total = songPageInfo.total
                    } else {
                        this.$message.error("系统错误请联系管理员！")
                    }
                })
            }
        },
        //更新每页条数
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pageSize = val
            this.getPageInfo()
        },
        //更新当前页
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.pageCurrent = val
            this.getPageInfo()
        },
        //改变歌曲状态
        changeStatus(id, status) {
            console.log(id)
            console.log(status)
            //获取token
            let jwtToken = localStorage.getItem('token')
            axios({
                method: 'get',
                url: 'http://localhost:8080/song/status' + '/' + id + '/' + status,
                headers: {
                    'token': jwtToken
                }
            }).then(res => {
                console.log(res)
            })
        },
        // 添加歌曲
        addSubmit() {
            //获取token
            let jwtToken = localStorage.getItem('token')
            let songLyric = localStorage.getItem('songAddLyric') 
            this.fileLrcList.length === 0 ? null:songLyric
            let songImgUrl = localStorage.getItem('songAddImgUrl')
            this.fileImgList.length === 0 ? null:songImgUrl
            let songUrl = localStorage.getItem('songAddUrl') 
            this.fileMp3List.length === 0 ? null:songUrl
            if(songLyric==""||songImgUrl==""||songUrl==""){
                this.$message.error("文件正在上传中，请稍后...")
            }else{
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/song/add',
                    headers: {
                        'token': jwtToken
                    },
                    data: {
                        'songName': this.addFrom.songName,
                        'songLyric': songLyric,
                        'songImg': songImgUrl,
                        'songUrl': songUrl,
                        'songStatus': 0
                    }
                }).then(res => {
                    if (res.data != undefined && res.data.code == 200) {
                        console.log(res.data)
                        // 刷新列表数据，重新求情列表数据
                        this.getPageInfo()
                        this.$message.success(res.data.message)
                        this.addFormVisible = false
                    } else { //失败
                        this.$message.error(res.data.message)
                    }
                    // 清空本地存储的图片地址
                    localStorage.removeItem('songAddUrl')
                    localStorage.removeItem('songAddImgUrl')
                    localStorage.removeItem('songAddLyric')
                })
            }
        },
        // 打开添加表单
        openAddForm() {
            // 清空数据
            this.addFrom = {}
            this.fileImgList = []
            this.fileLrcList = []
            this.fileMp3List = []
            // 打开表单
            this.addFormVisible = true
        },
        // 添加图片文件 改变时会调用
        handleChangeAddImg(file, fileList) {
            // 显示文件列表
            this.showImgFileList = true
            if (fileList.length > 0) {
                this.fileImgList = [fileList[fileList.length - 1]] // 显示最后一次选择的文件
            }
        },
        // 文件上传前调用 判断文件大小、类型
        beforeUploadAddImg(file) {
            // file.type image/jpeg image/png 
            // 对 file.type.slice(0, 5) image 进行截取，判断是否是图片
            const isImage = file.type.slice(0, 5) === 'image';
            const isLt30M = file.size / 1024 / 1024 < 30;
            if (!isImage) {
                this.$message.error('上传的文件不是图片!');
            }
            if (!isLt30M) {
                this.$message.error('上传头像图片大小不能超过 30MB!');
            }
            return isImage && isLt30M;
        },
        // 图片上传成功，回调函数
        uploadAddImgSuccess(response, file, fileList) {
            console.log(response)
            if (response.code == 200) {
                this.$message.success(response.message);
                // 获取文件访问地址
                let songAddImgUrl = response.data.songImgUrl
                // 将文件访问地址保存到 本地会话空间
                localStorage.setItem('songAddImgUrl', songAddImgUrl)
            } else {
                this.$message.error(response.message);
            }
            //刷新列表数据，重新求情列表数据
            this.getPageInfo()
        },
        // 添加歌词文件 改变时会调用
        handleChangeAddLrc(file, fileList) {
            // 显示文件列表
            this.showLrcFileList = true
            if (fileList.length > 0) {
                this.fileLrcList = [fileList[fileList.length - 1]] // 显示最后一次选择的文件
            }
        },
        // 歌词文件上传前调用 判断文件大小、类型
        beforeUploadAddLrc(file) {
            console.log("文件类型：" + file.type)
            // file.type text/plain
            // 判断是否是文本文件 .txt
            const isImage = file.type === 'text/plain';
            const isLt30M = file.size / 1024 / 1024 < 30;
            if (!isImage) {
                this.$message.error('上传的文件不是 txt 文件!');
            }
            if (!isLt30M) {
                this.$message.error('上传文件大小不能超过 30MB!');
            }
            return isImage && isLt30M;
        },
        // 歌词文件上传成功 回调函数
        uploadAddLrcSuccess(response, file, fileList) {
            console.log(response)
            if (response.code == 200) {
                this.$message.success(response.message);
                // 获取文件访问地址
                let songAddLyric = response.data.songLyric
                // 将文件访问地址保存到 本地会话空间
                localStorage.setItem('songAddLyric', songAddLyric)
            } else {
                this.$message.error(response.message);
            }
            //刷新列表数据，重新求情列表数据
            this.getPageInfo()
        },
        // 添加 mp3 文件 改变时会调用
        handleChangeAddMp3(file, fileList) {
            // 显示文件列表
            this.showMp3FileList = true
            if (fileList.length > 0) {
                this.fileMp3List = [fileList[fileList.length - 1]] // 显示最后一次选择的文件
            }
        },
        // mp3 文件上传前调用 判断文件大小、类型
        beforeUploadAddMp3(file) {
            console.log("文件类型：" + file.type)
            // file.type text/plain
            // 判断是否是文本文件 .txt
            const isImage = file.type === 'audio/mpeg';
            const isLt30M = file.size / 1024 / 1024 < 30;
            if (!isImage) {
                this.$message.error('上传的文件不是 mp3 文件!');
            }
            if (!isLt30M) {
                this.$message.error('上传文件大小不能超过 30MB!');
            }
            return isImage && isLt30M;
        },
        // mp3 文件上传成功 回调函数
        uploadAddMp3Success(response, file, fileList) {
            console.log(response)
            if (response.code == 200) {
                this.$message.success(response.message);
                // 获取文件访问地址
                let songAddUrl = response.data.songUrl
                // 将文件访问地址保存到 本地会话空间
                localStorage.setItem('songAddUrl', songAddUrl)
            } else {
                this.$message.error(response.message);
            }
            //刷新列表数据，重新求情列表数据
            this.getPageInfo()
        },
        // 单个删除，根据歌曲id,删除歌曲数据
        deleteById(id) {
            //获取token
            let jwtToken = localStorage.getItem('token')
            axios({
                method: 'delete',
                url: 'http://localhost:8080/song/delete/' + id,
                headers: {
                    'token': jwtToken
                }
            }).then(res => {
                if (res.data != undefined && res.data.code == 200) {
                    console.log(res.data)
                    // 打印后端返回的消息
                    this.$message.success(res.data.message)
                    //刷新列表数据，重新求情列表数据
                    this.getPageInfo()
                } else { //失败
                    this.$message.error(res.data.message)
                }
            })
        },
        // 根据id，查询用户并显示到修改表单中
        update(id) {
            //获取token
            let jwtToken = localStorage.getItem('token')
            axios({
                method: 'get',
                url: 'http://localhost:8080/song/selectOne/' + id,
                headers: {
                    'token': jwtToken
                }
            }).then(res => {
                if (res.data != undefined && res.data.code == 200) {
                    console.log(res.data)
                    this.updateFrom = res.data.data.song
                    console.log(this.updateFrom)
                    // 清空数据
                    this.fileImgList = []
                    this.fileLrcList = []
                    this.fileMp3List = []
                    // 打开修改表单
                    this.updateFormVisible = true
                } else { //失败
                    this.$message.error(res.data.message)
                }
            })
        },
        // 修改歌曲
        updateSubmit(id) {
            //获取token
            let jwtToken = localStorage.getItem('token')
            let songLyric = localStorage.getItem('songUpdateLyric') 
            this.fileLrcList.length === 0 ? null:songLyric
            let songImgUrl = localStorage.getItem('songUpdateImgUrl')
            this.fileImgList.length === 0 ? null:songImgUrl
            let songUrl = localStorage.getItem('songUpdateUrl') 
            this.fileMp3List.length === 0 ? null:songUrl
            axios({
                method: 'put',
                url: 'http://localhost:8080/song/update',
                headers: {
                    'token': jwtToken
                },
                data: {
                    songId: this.updateFrom.songId,
                    songName: this.updateFrom.songName,
                    songStatus: this.updateFrom.songStatus,
                    songLyric: songLyric,
                    songImg: songImgUrl,
                    songUrl: songUrl
                }
            }).then(res => {
                if (res.data != undefined && res.data.code == 200) {
                    console.log(res.data)
                    this.$message.success(res.data.message)
                    //关闭修改表单
                    this.updateFormVisible = false
                    //刷新列表数据，重新求情列表数据
                    this.getPageInfo()
                } else { //失败
                    this.$message.error(res.data.message)
                }
                // 清空本地存储的图片地址
                localStorage.removeItem('songUpdateUrl')
                localStorage.removeItem('songUpdateImgUrl')
                localStorage.removeItem('songUpdateLyric')
            })
        },
        // 图片上传成功，回调函数
        uploadUpdateImgSuccess(response, file, fileList) {
            console.log(response)
            if (response.code == 200) {
                this.$message.success(response.message);
                // 获取文件访问地址
                let songUpdateImgUrl = response.data.songImgUrl
                // 将文件访问地址保存到 本地会话空间
                localStorage.setItem('songUpdateImgUrl', songUpdateImgUrl)
            } else {
                this.$message.error(response.message);
            }
            //刷新列表数据，重新求情列表数据
            this.getPageInfo()
        },
        // 歌词文件上传成功 回调函数
        uploadUpdateLrcSuccess(response, file, fileList) {
            console.log(response)
            if (response.code == 200) {
                this.$message.success(response.message);
                // 获取文件访问地址
                let songUpdateLyric = response.data.songLyric
                // 将文件访问地址保存到 本地会话空间
                localStorage.setItem('songUpdateLyric', songUpdateLyric)
            } else {
                this.$message.error(response.message);
            }
            //刷新列表数据，重新求情列表数据
            this.getPageInfo()
        },
        // mp3 文件上传成功 回调函数
        uploadUpdateMp3Success(response, file, fileList) {
            console.log(response)
            if (response.code == 200) {
                this.$message.success(response.message);
                // 获取文件访问地址
                let songUpdateUrl = response.data.songUrl
                // 将文件访问地址保存到 本地会话空间
                localStorage.setItem('songUpdateUrl', songUpdateUrl)
            } else {
                this.$message.error(response.message);
            }
            //刷新列表数据，重新求情列表数据
            this.getPageInfo()
        },
        //e事件源，谁发生了这件事
        allSelect(e) {
            this.ids = []
            // 设置全选状态
            this.isAllSelect = e.target.checked
            // 如果是选中状态,将所有的id到ids中
            if (this.isAllSelect) {
                //添加所有的id到ids中
                this.list.forEach(element => {
                    this.ids.push(element.songId)
                });
            }
            console.log(this.ids)
        },
        ckSelect(e) {
            let id = e.target._value
            if (e.target.checked) { //选中，把对应的id添加到ids数组
                this.ids.push(id)
            } else { // 未选中，查找ids有没有对应的id，如果有删除掉
                let delindex = this.ids.indexOf(id)
                if (delindex > -1) {
                    this.ids.splice(delindex, 1)
                }
            }
            console.log(this.ids)
        },
        //批量删除
        deteleBatch() {
            console.log(this.ids)
            //获取token
            let jwtToken = localStorage.getItem('token')
            axios({
                method: 'delete',
                url: 'http://localhost:8080/song/deleteBatch',
                headers: {
                    'token': jwtToken
                },
                data: this.ids
            }).then(res => {
                if (res.data != undefined && res.data.code == 200) {
                    console.log(res.data)
                    // 打印后端返回的消息
                    this.$message.success(res.data.message)
                    //刷新列表数据，重新求情列表数据
                    this.getPageInfo()
                    // 清空 ids 数组
                    this.ids = []
                } else { //失败
                    this.$message.error(res.data.message)
                }
            })
        },
        // 打开添加歌手表单
        addSinger(id) {
            // 打开添加歌手表单
            this.singerVisible = true
            this.addSongId = id
            // 清空数据
            this.addSingerList = {}
            this.singerList = ''
            this.singerId = -1
            this.albumList = ''
            this.albumId = -1
        },
        // 歌手输入框失去焦点事件
        getSingerByName(singerName) {
            console.log("失去焦点:" + singerName)
            // 清空数据
            this.singerList = ''
            this.singerId = -1
            this.albumList = ''
            this.albumId = -1
            // 非空判断
            if (singerName == null || singerName == '') {
                this.$message.error('请输入用户名')
            } else {
                // 获取token
                let jwtToken = localStorage.getItem('token')
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/singer/getSingerByName/' + singerName,
                    headers: {
                        'token': jwtToken
                    },
                }).then(res => {
                    if (res.data != undefined && res.data.code == 200) {
                        console.log(res.data)
                        // 赋值
                        this.singerList = res.data.data.singerList
                        // this.$message.success(res.data.message)
                        // //刷新数据
                        // this.getPageInfo()
                        // this.menuVisible = false
                    } else { //失败
                        this.$message.error(res.data.message)
                    }
                })
            }
        },
        // 根据歌手 id 查询 此歌手的专辑信息
        getAlbumBySingerId(id) {
            console.log("歌手id:" + id)
            //获取token
            let jwtToken = localStorage.getItem('token')
            axios({
                method: 'get',
                url: 'http://localhost:8080/singer/getAlbumBySingerId/' + id,
                headers: {
                    'token': jwtToken
                },
            }).then(res => {
                if (res.data != undefined && res.data.code == 200) {
                    console.log(res.data)
                    this.albumList = res.data.data.albumList
                    //刷新数据
                    // this.getPageInfo()
                    // this.singerVisible = false
                } else { //失败
                    this.$message.error(res.data.message)
                }
            })
        },
        // 添加歌手与专辑
        addSingerSubmit(songId, singerId, albumId) {
            console.log('歌曲id : ' + songId)
            console.log('歌手id:' + singerId)
            console.log('专辑id:' + albumId)
            if (singerId == -1) {
                this.$message.error('请选择要添加歌手')
            } else {
                //获取token
                let jwtToken = localStorage.getItem('token')
                axios({
                    method: 'post',
                    url: 'http://localhost:8080/song/addSingerAlbumForSong/' + songId + '/' +
                        singerId + '/' + albumId,
                    headers: {
                        'token': jwtToken
                    },
                }).then(res => {
                    if (res.data != undefined && res.data.code == 200) {
                        console.log(res.data)
                        this.$message.success(res.data.message)
                        //刷新数据
                        this.getPageInfo()
                        this.singerVisible = false
                    } else { //失败
                        this.$message.error(res.data.message)
                    }
                })
            }
        }
    }
})